<script setup>
import _ from 'lodash'
import {api} from "@jzl/api";
import {onMounted, ref} from "vue";
import {$WinMicrosvc, $WinReports, $WinPages} from "@jzl/comps-mg";
import {$WinForms} from "@jzl/comps";
import {DFT_ICONS} from "@jzl/icons";

const white = ref({
  forms: [],
  pages: [],
  reports: [],
  apis: []
})

onMounted(() => {
  init()
})

const init = async () => {
  let configs = await api.whiteapi.getConfigs();
  white.value = configs || {};
}

const handleShowPages = async () => {
  $WinPages({
    // defaultAppId: _.get(app, 'group_id', -1),
    onConfirm: async (page) => {
      let pageId = _.get(page, 'page_id');
      let pageCode = _.get(page, 'page_code');
      let type = _.get(page, 'type');

      if (!pageId) return;

      if (type !== 1 && type !== 2 && type !== 5) {
        $jui.toast('暂不支持的页面类型！');
        return;
      }

      let ret = await api.whiteapi.create({
        type: 1,
        page_code: pageCode
      });

      if (ret) {
        init();
      }
    }
  });
}

const handleShowForms = async () => {
  $WinForms({
    type: 'view',
    onConfirm: async (info) => {
      let form = _.get(info, 'form');
      let view = _.get(info, 'view');
      if (!form || !form.form_id) return;

      // let form_id = form.form_id;
      // let view_id = _.get(view, 'form_view_id', -1);

      let formCode = _.get(form, 'form_code');
      let viewCode = _.get(view, 'form_view_code', '');

      if (!formCode) return;

      let ret = await api.whiteapi.create({
        type: 2,
        form_code: formCode,
        view_code: viewCode
      });

      if (ret) {
        init();
      }
    }
  });
}

const handleShowReport = async () => {
  $WinReports({
    onConfirm: async (report) => {
      let reportdef_code = _.get(report, 'reportdef_code');
      let reportdef_id = _.get(report, 'reportdef_id');

      if (!reportdef_id || !reportdef_code) return;

      let ret = await api.whiteapi.create({
        type: 3,
        report_code: reportdef_code
      });

      if (ret) {
        init();
      }
    }
  });
}

const handleShowApi = async () => {
  $WinMicrosvc({
    onConfirm: async (api) => {
      let api_uuid = _.get(api, 'api_uuid');

      if (!api_uuid) return;

      let ret = await api.whiteapi.create({
        type: 4,
        api_code: api_uuid
      });

      if (ret) {
        init();
      }
    }
  });
}

const handleRemove = async (it) => {
  let id = _.get(it, 'id');

  if (!id) return;

  let ret = await api.whiteapi.remove(id);

  if (ret) init();
}
</script>
<template>
  <div class="config-container">
    <div class="config-box">
      <div class="config-box-head">
        <!--<div class="config-box-head-icon"></div>-->
        <div class="config-box-title">表单白名单
          <el-button
            type="primary"
            plain
            round
            class="item-edit-icon"
            size="small"
            @click.stop="handleShowForms()"
          >
            <template #icon>
              <JIcon :icon="DFT_ICONS.add" />
            </template>添加
          </el-button>
        </div>
      </div>
      <div class="config-box-body">
        <el-tag
          v-for="f in white.forms"
          v-tippy="{ arrow: true }"
          :content="f.form_name"
          closable
          @close="handleRemove(f)"
        >{{ f.form_name }}（{{ f.form_code }}）
          <template
            v-if="f.form_view_id > 0"
          >
            <JIcon :icon="DFT_ICONS.braceLeft"/>
            {{ f.view_name }}（{{ f.view_code }}）
            <JIcon :icon="DFT_ICONS.braceRight"/>
          </template>
          <span v-else>
            <template v-if="f.view_code === '-1'">全部表单视图</template>
            <template v-else>仅表单</template>
          </span>
        </el-tag>
      </div>
    </div>
    <div class="config-box">
      <div class="config-box-head">
        <!--<div class="config-box-head-icon"></div>-->
        <div class="config-box-title">页面白名单（页面下接口都自动设置为白名单接口）
          <el-button
            type="primary"
            plain
            round
            class="item-edit-icon"
            size="small"
            @click.stop="handleShowPages()"
          >
            <template #icon>
              <JIcon :icon="DFT_ICONS.add" />
            </template>添加
          </el-button>
        </div>
      </div>
      <div class="config-box-body">
        <el-tag
          v-for="p in white.pages"
          v-tippy="{ arrow: true }" :content="p.page_name"
          closable @close="handleRemove(p)">{{ p.page_name }}（{{ p.page_code }}）
        </el-tag>
      </div>
    </div>

    <div class="config-box">
      <div class="config-box-head">
        <!--<div class="config-box-head-icon"></div>-->
        <div class="config-box-title">报表白名单
          <el-button
            type="primary"
            plain
            round
            class="item-edit-icon"
            size="small"
            @click.stop="handleShowReport()"
          >
            <template #icon>
              <JIcon :icon="DFT_ICONS.add" />
            </template>添加
          </el-button>
        </div>
      </div>
      <div class="config-box-body">
        <el-tag
          v-for="r in white.reports"
          v-tippy
          :content="r.report_name"
          closable @close="handleRemove(r)"
        >{{ r.report_name }}（{{ r.report_code }}）
        </el-tag>
      </div>
    </div>

    <div class="config-box">
      <div class="config-box-head">
        <!--<div class="config-box-head-icon"></div>-->
        <div class="config-box-title">微接口白名单
          <el-button
            type="primary"
            plain
            round
            class="item-edit-icon"
            size="small"
            @click.stop="handleShowApi()"
          >
            <template #icon>
              <JIcon :icon="DFT_ICONS.add" />
            </template>添加
          </el-button>
        </div>
      </div>
      <div class="config-box-body">
        <el-tag
          v-for="a in white.apis"
          v-tippy="{ arrow: true }"
          :content="a.api_name"
          closable @close="handleRemove(a)"
        >{{ a.api_name }}（{{ a.api_code }}）
        </el-tag>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.config-container .config-box .config-box-body {
  display: block;
  min-height: 50px;

  .el-tag {
    margin-right: 10px;
    margin-bottom: 5px;
  }
}
/*
.config-container .config-box .config-box-head {
  padding-left: 10px;
}*/
</style>
